<template>
  <view class="">
    <uni-nav-bar title="测试记录" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
    <view class="filling">
      <view class="filling_center">
        <view class="datas">
          <uni-datetime-picker
            v-model="range"
            type="daterange"
            :border="false"
            :clear-icon="false"
            rangeSeparator="至"
            @change="change"
          />
        </view>
        <view class="screen" @click="openPhonePad()">筛选</view>
      </view>
      <view class="filling_bottom" v-if="fillName">
        <view class="filling_bottoms" v-if="fillName" @click="delCar()">
          <text>{{fillName}}</text>
          <uni-icons type="closeempty" size="12" style="margin-left: 10rpx" color="#333"></uni-icons>
        </view>
      </view>
    </view>
    <!-- Tab表格 -->
    <view class="record">
      <view class="recordTab" style="background: #f2f2f2">
        <text>时间</text>
        <text>任务量</text>
        <text>出液量</text>
        <text>脉冲当量</text>
      </view>
      <!-- 列表 -->
      <scroll-view
        scroll-y="true"
        enable-back-to-top
        @scrolltolower="loadMore"
        class="scroll-box"
        :style="{ height: pageHeight + 'px' }"
      >
        <view class="recordTab" v-for="item in orderLists" :key="item.id">
          <text>{{ item.createtime }}</text>
          <text>{{ item.amount }}</text>
          <text>{{ item.true_amount }}</text>
          <text>{{ item.pulse_equ }}</text>
        </view>
        <view class="fillings" v-if="orderLists.length < 1" :style="{ height: pageHeight + 'px' }">
          <image :src="Empty2" mode=""></image>
          <text>暂无订单</text>
        </view>
      </scroll-view>
    </view>
    <!-- 加注机选择 -->
    <uni-popup ref="FillShow" type="right"  background-color="#fff">
      <view class="propos" style="width: 670rpx;">
        <scroll-view scroll-y="true" :style="{height:'81.5vh',marginTop:isH5?'5vh':'8vh'}">
          <view class="scroll">
            <view
              class="scrolls"
              v-for="(item, index) in fillLists"
              :key="index"
              @click="addCarBy(item.id, item.code)"
              :style="{ borderColor: FillId == item.id ? '#399FFF' : '' }"
            >
              <text :style="{ color: FillId == item.id ? '#399FFF' : '' }">{{item.code}}</text>
              <view class="scrolla" :style="{ display: FillId == item.id ? 'flex' : 'none' }">
                <uni-icons type="checkmarkempty" color="#fff" size="11"></uni-icons>
              </view>
            </view>
            <view class="scrolle" v-if="fillLists.length < 1">
              <image
                :src="Empty1"
                mode=""
              ></image>
              <text>暂无车辆信息</text>
            </view>
          </view>
        </scroll-view>
        <view class="propos_bottom">
          <text @click="() => (FillId = '')">重置</text>
          <text @click="sureCar()">确定</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { fillingCeOrder, fillList } from '@/gql/filling';
import { getDriverID } from '@/stores/driverID';
import { navBack } from '@/utils/navigator';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { computed, onMounted, ref } from 'vue';
import { isH5 } from '@/utils/platform';
import { Empty1,Empty2 } from '@/utils/Static';
// static
const driver_id = getDriverID();
const orderLists = ref([]);
// data
const pageHeight = ref('');
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
const range = ref([start, end]);
const FillId = ref(''); //加注机ID
const fillName = ref(''); // 加注机别名
const fillLists = ref([]);

const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
const loadStatus = computed(() => (isLoading ? 'loading' : currentPage.value < lastPage.value ? 'more' : 'noMore'));
// refs
const popup = ref(null);
const FillShow = ref(null);
onMounted(() => {
  //获取可视区域的高度
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 185;
    },
  });
  orderList();
  fillInfor();
});
/**
 * 获取页面信息
 */
function orderList() {
  isLoading.value = true;
  loadStatus.value = 'loading';
  uni.showLoading({
    title: '加载中...',
    icon: 'loading',
    duration: 2000,
  });
  const payload = {
    query: fillingCeOrder,
    variables: {
      page: currentPage.value,
      start,
      end,
      fill_id: FillId.value + '',
      driver_id,
    },
  };
  toPublish('ql/driver/getTestOrderList', payload, (obj: any) => {
    const data = obj.data;
    uni.hideLoading();
    isLoading.value = false;
    orderLists.value = [...orderLists.value, ...data.test_order_list.list];
    lastPage.value = data.test_order_list.lastpage;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    orderList();
  }
}
/**
 * 切换选中的时间节点
 */
function change([sta, en]) {
  currentPage.value = 1;
  orderLists.value = [];
  start = sta;
  end = en;
  orderList();
}
/**
 * 获取加注机信息
 */
function fillInfor() {
  const payload = {
    query: fillList,
    variables: { driver_id },
  };
  toPublish('ql/driver/getListByTest', payload, (obj: any) => {
    const ref = obj;
    fillLists.value = ref.data.fill_list_test;
  });
}
function openPhonePad() {
  FillShow.value.open();
}
function closePhonePad() {
  FillShow.value.close();
}
/**
 * 选中的加注机id
 */
function addCarBy(num, name) {
  FillId.value = num;
  fillName.value = name;
}
/**
 * 确认筛选的加注机
 */
function sureCar() {
  if (!FillId.value) {
    uni.showToast({
      title: '请选择您要查询的加注机',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  closePhonePad();
  // 获取页面信息
  lastPage.value = 1;
  orderLists.value = [];
  orderList();
}
/**
 * 删除筛选加注机
 */
function delCar() {
  FillId.value = '';
  fillName.value = '';
  currentPage.value = 1;
  orderLists.value = [];
  orderList();
}
</script>

<style lang="less">
@import url('../tester/less/record.less');
</style>
<style>
.datas >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.datas >>> .uni-date-x {
  font-size: 30rpx !important;
}
.datas >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
